Skip to main content

Understanding JavaScript Errors

Resource

An error is a type of object built into the JavaScript language, consisting of a name/type and a message.

Example 1: 
const a = "Hello"; 
const b = "World"; 

console.log(c);

The ReferenceError is thrown because here, it refers to a variable that is not declared and/or initialized within the current scope.

Example 2: 
> 1  const a = 5; 
> 2  const b = 10; 
> 3
> 4	 function add(){
> 5	   return c; 
> 6	 }
> 7	
> 8	 function print(){
> 9	   add();
> 10  }
> 11	
> 12  print();

The stack trace tells us that:

  1. c is not defined in the scope of add(), which is declared on line 5.
  2. add() was called by print(), which was declared on line 9.
  3. print() itself was called on line 12. → this allows you to trace the evolution of an error back to its origin, which here is the declaration of add();

Common Types of Errors​

Generally speaking, when you do something wrong in code, there are two main types of errors that you'll come across:

  • Syntax errors: These are spelling errors in your code that cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean!
  • Logic errors: These are errors where the syntax is correct, but the code is not what you intended it to be, meaning that the program runs successfully but gives incorrect results. These are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error.

More specifically, there are common types of errors that you may come across:

1. Syntax Error​

Resource MDN - SyntaxErrors

A syntax error occurs when the code you are trying to run is not written in accordance with the grammatical rules of JavaScript.

function helloWorld(){
  console.log "Hello World!"
}

→ this is because we forgot the parentheses for console.log()

2. Reference Error​

Resource MDN - ReferenceError

We’ve seen ReferenceError in the examples in the prior section. This means whatever variable you are trying to reference does not exist within the current scope - or it has been spelled incorrectly.

3. Type Error​

Resource [MDN - TypeError](MDN - TypeError

A TypeError may be thrown when:

  • an operand or argument passed to a function is incompatible with the type expected by that operator or function
  • when attempting to modify a value that cannot be changed
  • when attempting to use a value inappropriately
**Example: ** 
const str1 = "Hello"; 
const str2 = "World!"; 
const message = str1.push(str2);

→ even though push() is a function, it isn’t a a function used on a String (it isn’t a String method), it’s used on arrays.

Warning vs. Errors Warnings are typically shown in yellow, while errors are typically shown in red. Errors will stop the execution of your program, but warnings are messages that provide you with insight into potential problems. While you should address these warnings, they are not as significant as errors and are more likely to be informational.

Last updated on